<template>
    <div class="mainBox">
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 搜索框 -->
        <!-- <div class="search">
            <div class="searchBox pull_left">
                <div class="pull_left txtClass">用户查询：</div>
                <el-input
                    class="pull_left inputClass"
                    placeholder="输入用户注名"
                    size="small"
                    v-model="inputUser"
                    clearable>
                </el-input>
                <el-button class="pull_left" type="primary" size="small" icon="el-icon-search" @click="userSearch()">查询</el-button>
                <div class="clear"></div>
            </div>
            <div class="searchBox pull_left">
                <div class="pull_left txtClass">会员查询：</div>
                <el-input
                    class="pull_left inputClass"
                    placeholder="输入会员注册账号"
                    size="small"
                    v-model="inputMember"
                    clearable>
                </el-input>
                <el-button class="pull_left" type="primary" size="small" icon="el-icon-search">查询</el-button>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div> -->
        <module
            :headerData="headerData"
            :total="total"
            :tableData="tableData"
            @CurrentChange="CurrentChange"
            @SizeChange="SizeChange"
            >
             <template v-slot:mg_state="{row}">
                    <div>
                  
                        <el-switch
                        v-model="row.mg_state"
                        @change="stateClick(row)"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                        </el-switch>
                    </div>
                </template>
                <template v-slot:menu="{index,row}">
                    <div>
                        <el-button @click="editMessage(row,index)" type="success" round size="small">编辑</el-button>
                         <el-button type="danger" @click="deleteMessage(index)" round size="small">删除</el-button>
                    </div>
                </template>
            </module>
            <el-dialog title="修改用户信息" :visible.sync="editDocDialogVisible" width="40%" >
            <el-form
                    :model="editDocForm"
                    ref="editDocForm"
                    :rules="editDocFormRules"
                    label-width="120px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editDocForm.username"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="editDocForm.sex"></el-input>
                </el-form-item>
                <el-form-item label="用户注册账号" prop="user_registration">
                    <el-input v-model="editDocForm.user_registration"></el-input>
                </el-form-item>
                <el-form-item label="用户地址" prop="address">
                    <el-input v-model="editDocForm.address"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="user_type">
                    <el-input v-model="editDocForm.user_type"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-button @click="editDocDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitFormEdit('editDocForm')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import module from "../../components/module.vue"
import {UserTableListMock , UserTableMyList , deleteUserTableList} from "@/api/userManagement.js"
export default {
    name:"userManagement",
    data() {
        return {
                editDocForm: {
                    id:"",
                    username:"",
                    sex:"",
                    user_registration:"",
                    address:"",
                    user_type:""},
                editDocDialogVisible: false,
                resetSetRightDialog:false,
                setRightDialogVisible:false,
                editDocFormRules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请输入性别', trigger: 'blur'}
                    ],
                    user_registration: [
                        {required: true, message: '请输入用户注册账号', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入用户地址', trigger: 'blur'}
                    ],
                    user_type: [
                        {required: true, message: '请输入用户类型', trigger: 'blur'}
                    ]
                },
            tabPosition:"left",
            inputUser: '',
            inputMember: '',
            headerData:[
                {
                    prop:"username", 
                    label:"用户名",
                    width:"100px"
                },
                 {
                    prop:"sex", 
                    label:"性别",
                    width:"100px"
                },
                {
                     prop:"user_registration", 
                    label:"用户注册账号",
                    width:"150px"
                },
                {
                    prop:"address",
                    label:"用户地址",
                    width:"150px"
                },
                {
                    prop:"create_time",
                    label:"注册时间",
                    width:"180px"
                },
                {
                    prop:"user_type",
                    label:"用户类型",
                    width:"100px"
                }
            ],
            tableData:[],
            total:0,
            pagesize:"5",
            pagenum:"1",
            editIndex:"",
        }
    },
  computed: {
    tableData() {
      return this.tableData.filter((p) => {
        return (
          p.username.indexOf(this.inputUser) !== -1
        );
      });
    },
  },
    methods:{
        userSearch(){
            let _self = this;
            _self.dataInit();
        },
        editMessage(row,index){
            let _self = this;
            _self.editIndex = index;
                _self.editDocDialogVisible=true;
                _self.editId=row.id;
                _self.editDocForm=JSON.parse(JSON.stringify(row))
        },
         submitFormEdit(editDoc){
             let _self =this;
                 this.$refs[editDoc].validate((valid) => {
                    if (valid) {
                         _self.$set(_self.tableData,_self.editIndex,_self.editDocForm)
                       _self.editDocDialogVisible=false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
        },
        deleteMessage(index){
            let _self = this;
            deleteUserTableList().then(res=>{
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                _self.tableData.splice(index,1);
            })
        },
        dataInit(){
            let _self = this;
            let data = {
                pagenum:_self.pagenum,
                pagesize:_self.pagesize,
                query:_self.inputUser
            }
             UserTableListMock().then(res =>{
                //  console.log(res)
                 _self.tableData = res.data.list;
                 _self.total = res.data.list.length;
                 UserTableMyList(data).then(ress=>{
                     _self.tableData = ress.data.user;
                     _self.total = ress.data.total;
                 })
             })
        },
        CurrentChange(val){
            let _self = this;
            _self.pagenum = val;
            _self.dataInit()
        },
        SizeChange(val){
            // console.log(val)
            let _self = this;
            _self.pagesize = val;
            _self.dataInit()
        },
    },
    components:{
        module
    },
    mounted() {
        let _self = this;
        _self.dataInit()
    },
    
}
</script>
<style>
.pull_left{
    float: left;
}
.pull_right{
    float: right;
}
.clear{
    clear: both;
}
.mainBox{
    margin-left: 10px;
}
.breadcrumb{
    margin: 10px 0;
}
.inputClass{
    width: 150px;
    margin: 0 10px;
}
.txtClass{
    line-height: 32px;
}
.searchBox{
    margin: 0 20px 0 10px;
}
.search{
    width: 100%;
    margin: 20px 0;
}
</style>